<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table下拉选择器</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" id="myform" action="" style="padding:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">省份</label>
                <div class="layui-input-inline" style="width: 600px">
                    <input type="text" name="sfdm" required lay-verify="required" placeholder="请选择省份" autocomplete="off"
                           class="layui-input" id="sfdm" value="" ts-selected="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">SQL</label>
                <div class="layui-input-inline" style="width: 700px">
                    <textarea name="sql" required lay-verify="required" placeholder="请输入"
                              class="layui-textarea" style="width: 600px;float: left"></textarea>
                    <button id="his" type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                            style="float: left;margin-left: 10px;position:absolute;bottom:5px;">
                        <i class="layui-icon">&#xe60a;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限定显示数</label>
                <div class="layui-input-inline">
                    <input type="text" name="limit" required lay-verify="number" value="50" class="layui-input  query_x">
                    <span id="modle_tips"></span>
                </div>
                <div class="layui-input-inline" style="width: 700px">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    <button id ="export" type="button" class="layui-btn query_x">导出</button>
                    <button id="switch" type="button" class="layui-btn">切换</button>
                    <input type="hidden" id="actionType" name="actionType" value="duck">
                    <span style="display: none" id="query_column"></span>
                    <span style="display: none" id="query_result"></span>
                </div>
            </div>
        </form>

        <table class="layui-table">
            <colgroup id="t-col">
            </colgroup>
            <thead id="t-th">
            </thead>
            <tbody id="t-body">
            </tbody>
        </table>
    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'tableSelect'], function () {
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            tableSelect = layui.tableSelect;

        tableSelect.render({
            elem: '#sfdm',
            searchKey: 'sfmc',
            checkedKey: 'sfdm',
            searchPlaceholder: '请选择省份',
            table: {
                url: '/listPlatform',
                cols: [[
                    {type: 'checkbox'},
                    {field: 'sfdm', title: '省份代码', width: 100},
                    {field: 'sfmc', title: '省份名称', width: 100},
                    {field: 'url', title: '域名', width: 300}
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.sfmc)
                })
                elem.val(NEWJSON.join(","))
            }
        });

        var queryFun = function (ps,field){
            $.ajax({
                url: "/query",
                data: field,
                success: function (data) {
                    if (0 != data.code) {
                        layer.alert(data.msg, function (index) {
                            $("#t-body").html(data.msg);
                            layer.close(index);
                        });
                        return;
                    }
                    if("lady"==field.actionType){
                        $("#t-th").empty().html("<tr><td>省份</td><td>结果</td></tr>");
                        var la_html = [];
                        for (let i = 0; i < data.data.length; i++) {
                            la_html.push("<tr><td>");
                            la_html.push(data.data[i].sfmc);
                            la_html.push("</td><td>");
                            la_html.push(data.data[i].data[0]);
                            la_html.push("</td></tr>")
                        }
                        $("#t-body").empty().html(la_html.join(""));
                        return;
                    }

                    var rowList = data.data;
                    if(rowList.length == 0){
                        $("#t-body").html("<tr><td>没有数据</td></tr>");
                        return;
                    }
                    if(ps.length == 0){
                        for (let i = 0; i < rowList.length; i++) {
                            var temp = rowList[i];
                            if (temp.code != 1) {
                                continue;
                            }
                            if (temp.data.length == 0) {
                                continue;
                            }
                            ps = Object.keys(rowList[i].data[0]);
                            break;
                        }
                    }
                    if (ps.length == 0) {
                        if(rowList.length>0&&rowList[0].msg){
                            $("#t-col").html('<col width="150">');
                            $("#t-th").html("<tr><td>错误信息</td></tr>");
                            $("#t-body").html('<tr><td>'+rowList[0].msg+'</td></tr>');
                            return;
                        }
                        $("#t-col").html('<col width="150">');
                        $("#t-th").html("<tr><td></td></tr>");
                        $("#t-body").html('<tr><td>无数据</td></tr>');
                        return ;
                    }
                    $("#query_column").html(JSON.stringify(ps));
                    var col = "";
                    for (let i = 0; i < ps.length; i++) {
                        col+='<col width="150">';
                    }
                    col+='<col width="100">';
                    col+='<col>';
                    $("#t-col").html(col);

                    var th = "<tr>";
                    th+='<td>省份</td>';
                    for (let i = 0; i <ps.length; i++) {
                        th+='<td>'+ps[i]+'</td>';
                    }
                    th+="</tr>";
                    $("#t-th").html(th);

                    var tb = "";
                    for (let i = 0; i < rowList.length; i++) {
                        var temp = rowList[i];
                        if (temp.code != 1) {
                            tb+='<tr><td>'+temp["sfmc"]+'</td><td colspan="'+(ps.length==0?1:ps.length)+'">'+temp.msg+'</td></tr>'
                            continue;
                        }

                        tb+="<tr>";
                        tb+='<td rowspan="'+(temp.data.length==0?1:temp.data.length)+'">'+temp["sfmc"]+'</td>';
                        for (let i = 0; i <ps.length; i++) {
                            try {
                                tb += '<td>' + temp.data[0][ps[i]] + '</td>';
                            }catch (err){
                                tb += '<td></td>';
                            }
                        }
                        tb+="</tr>";
                        if(temp.data.length==0){
                            //tb+="<tr><td colspan='"+ps.length+"'></td></tr>";
                            continue;
                        }
                        for (let j = 1; j <temp.data.length; j++) {
                            tb+="<tr>";
                            for (let i = 0; i <ps.length; i++) {
                                tb+='<td>'+temp.data[j][ps[i]]+'</td>';
                            }
                            tb+="</tr>";
                        }
                    }
                    $("#t-body").html(tb);
                    $("#query_result").html(JSON.stringify(data));
                },
                error: function (data) {
                    layer.alert('请求出错');
                    $("#t-body").html('请求出错');
                }
            });
        }

        form.on('submit(*)', function (data) {
            data.field.sfdm = $("#sfdm").attr("ts-selected");
            var field = data.field;
            $("#t-body").html('努力查询中....');
            $.ajax({
                url:"/queryColumn",
                data:data.field,
                success:function (data){
                    var ps = data.code==0?data.data:[];
                    queryFun(ps,field);
                },
                error: function (data) {
                    layer.alert('请求出错');
                    $("#t-body").html('请求出错');
                }
            });
            return false;
        });

        $("#his").click(function (){
            var index = layer.open({
                title:"历史记录",
                type:2,
                shade:0.2,
                area:['1132px','600px'],
                content:"sql_his.html"
            });
        });

        $("#export").click(function (){
            var content = $("#query_result").html();
            var column = $("#query_column").html();
            var exportForm = $('<form action="/api/cert/download" method="post">\
            <input type="hidden" name="content" value="'+encodeURIComponent(content)+'"/>\
            <input type="hidden" name="column" value="'+encodeURIComponent(column)+'"/>\
            </form>');
            $(document.body).append(exportForm);
            exportForm.submit();
            exportForm.remove();
        });

        $("#switch").click(function (){
            if($("#actionType").val()=="duck"){
                $(".query_x").hide();
                $("#actionType").val("lady");
                $("#modle_tips").html("更新模式");
            }else{
                $(".query_x").show();
                $("#actionType").val("duck");
                $("#modle_tips").empty();
            }
        });
    });
</script>
</body>
</html>